<template>
  <div class="create_order">
    <div class="content" :style="getvalue()">
      <div class="item">
        <div class="title">{{ languageJson.home.overtime }}</div>
        <el-select v-model="orderdata.place_data[orderindex].runtime" :placeholder="languageJson.home.overtime"
          style="width: 80px">
          <el-option v-for="item in overtimeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="item">
        <div class="title">{{ languageJson.home.orderamount }}</div>
        <el-input-number :controls="false" :placeholder="languageJson.home.orderamount"
          v-model="orderdata.place_data[orderindex].reservation_stake" style="width: 64px; height: 24px" />
      </div>
      <div class="item">
        <div class="title">{{ languageJson.home.odd }}</div>
        <el-input-number :controls="false" :placeholder="languageJson.home.odd"
          v-model="orderdata.place_data[orderindex].min_odd" style="width: 64px; height: 24px" />
        <!-- <div class="range_input">
          <input type="text" v-model="orderdata.place_data[orderindex].min_odd"
            :placeholder="languageJson.home.minnum" />
          <span>-</span>
          <input type="text" v-model="orderdata.place_data[orderindex].max_odd"
            :placeholder="languageJson.home.maxnum" />
        </div> -->
      </div>
      <div class="item">
        <div></div>
        <el-button class="pedir_button" @click="clickCreateorder()">{{
          languageJson.home.placeorder
        }}</el-button>
      </div>
    </div>
    <div class="content2">
      <div style="display: flex">
        <div class="item" style="width: 96px">
          <div class="name">{{ languageJson.home.orderpattern }}</div>
          <el-select v-model="orderdata.place_data[orderindex].order_mode" @change="
            dialogStore.changeordermode(
              orderdata,
              itemdata.data.odds[pkindex],
              itemdata,
              orderindex,
              orderdata.place_data[orderindex].order_mode
            )
            " :placeholder="languageJson.home.orderpattern" style="width: 86px">
            <el-option :label="languageJson.home.singleAccount" value="one_user" />
            <el-option :label="languageJson.home.multipleAccounts" value="all_user" />
            <!-- <el-option :label="languageJson.home.countAccount" value="count_user" /> -->
          </el-select>
        </div>
        <div class="item" style="width: 96px">
          <div class="name" ref="formRef4">{{ languageJson.home.placeOrderpattern }}</div>
          <el-select v-model="orderdata.place_data[orderindex].place_mode"
            :placeholder="languageJson.home.placeOrderpattern" style="width: 86px">
            <el-option :label="languageJson.home.successively" :value="0" />
            <el-option v-if="orderdata.place_data[orderindex].order_mode == 'all_user'"
              :label="languageJson.home.meanwhile" :value="1" />
            <el-option
              v-if="orderdata.place_data[orderindex].order_mode == 'all_user' && dialogState.dialogArr[dataindex].match.sport_type == 'basketball'"
              :label="languageJson.home.cycle" :value="2" />
          </el-select>
        </div>
      </div>

      <div class="item" style="margin-left: 16px">
        <div class="name">{{ languageJson.home.limit }}</div>
        <div class="price">
          {{ orderdata.limit.min_stake }}
          -
          {{ orderdata.limit.max_stake }}
        </div>
      </div>
    </div>

    <div class="content2" style="margin-top: 8px">
      <div style="display: flex" v-if="orderdata.alluser && orderdata.alluser.show">
        <!-- <div class="item" style="width: 96px">
          <div class="name" ref="formRef4">{{ languageJson.home.accountNum }}</div>
          <el-input-number :controls="false" :placeholder="languageJson.accountNum" :min="2"
            :max="orderdata.alluser.member" v-model="orderdata.place_data[orderindex].member_count"
            style="width: 86px; height: 24px" />
          <div>
            <div class="price">
              2 -
              {{ orderdata.alluser.member }}
            </div>
          </div>
        </div> -->
      </div>
      <div class="item" v-if="
        orderdata.place_data[orderindex].order_mode == 'all_user' &&
        (orderdata.place_data[orderindex].place_mode == 1 || orderdata.place_data[orderindex].place_mode == 2)
      ">
        <div class="name" ref="formRef4">{{ languageJson.home.limitType }}</div>
        <el-select v-model="orderdata.place_data[orderindex].money_mode" :placeholder="languageJson.home.limitType"
          style="width: 86px">
          <el-option :label="languageJson.home.average" value="average" />
          <el-option :label="languageJson.home.ceiling" value="max" />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
const props = defineProps({
  orderdata: Object,
  orderindex: Number,
  dataindex: Number,
  pkindex: Number,
  itemdata: Object,
})
const { dialogStore, dialogState } = inject('DialogStore')
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const overtimeList = ref([
  {
    value: -1,
    label: languageJson.value.home.continuouslyOrders,
  },
  {
    value: -2,
    label: languageJson.value.home.stopDisk,
  },
  {
    value: -3,
    label: languageJson.value.home.beforeMatch,
  },
  {
    value: -4,
    label: languageJson.value.home.duringMatch,
  },
  {
    value: -5,
    label: `${languageJson.value.home.beforeMatch} + ${languageJson.value.home.duringMatch}`,
  },
  {
    value: 5,
    label: `5s ${languageJson.value.home.stop}`,
  },
  {
    value: 10,
    label: `10s ${languageJson.value.home.stop}`,
  },
  {
    value: 20,
    label: `20s ${languageJson.value.home.stop}`,
  },
  {
    value: 30,
    label: `30s ${languageJson.value.home.stop}`,
  },
  {
    value: 60,
    label: `1min ${languageJson.value.home.stop}`,
  },
  {
    value: 120,
    label: `2min ${languageJson.value.home.stop}`,
  },
  {
    value: 300,
    label: `5min ${languageJson.value.home.stop}`,
  },
  {
    value: 600,
    label: `10min ${languageJson.value.home.stop}`,
  },
  {
    value: 900,
    label: `15min ${languageJson.value.home.stop}`,
  },
  {
    value: 1200,
    label: `20min ${languageJson.value.home.stop}`,
  },
  {
    value: 2400,
    label: `30min ${languageJson.value.home.stop}`,
  },
])

const clickCreateorder = () => {
  if (
    props.orderdata.place_data[props.orderindex].runtime != undefined &&
    props.orderdata.place_data[props.orderindex].reservation_stake != undefined &&
    props.orderdata.place_data[props.orderindex].min_odd != '' &&
    props.orderdata.place_data[props.orderindex].max_odd != '' &&
    props.orderdata.place_data[props.orderindex].order_mode != undefined &&
    props.orderdata.place_data[props.orderindex].place_mode != undefined
  ) {
    let match = dialogState.dialogArr[props.dataindex].match
    let body = {
      sport_type: match.sport_type,
      total_stake: props.orderdata.total_stake,
      minfo: {
        sport_type: match.sport_type,
        event_type: match.event_type,
        league_id: match.league_id,
        league_name: match.league_name,
        home_id: match.home_id,
        home_name: match.home_name,
        away_id: match.away_id,
        away_name: match.away_name,
        match_time: match.match_time,
        match_time_stamp: match.match_time_stamp,
      },
      score: {
        score: match.score == '' ? '0:0' : match.score,
        half_score: match.half_score ? match.red_card : '0:0',
        red_card: match.red_card == '' ? '0:0' : match.red_card,
        yellow_card: match.yellow_card == '' ? '0:0' : match.yellow_card,
        corner: match.corner == '' ? '0:0' : match.corner,
      },
      place_data: props.orderdata.place_data,
      event_type: match.event_type,
    }
    body.place_data[0].reservation_pk_ratio = props.itemdata.data.odds[props.pkindex].odds_name
    delete body.place_data[0].reverse_nav_data
    let a = []

    props.orderdata.place_data.forEach(item => {
      let pkoddskey = item.pk_odds_key
      let pkoddskeyarr = pkoddskey.split(':')
      pkoddskeyarr[pkoddskeyarr.length - 2] = props.itemdata.data.odds[props.pkindex].pk_ratio

      let b = {
        runtime: item.runtime,
        order_mode: item.order_mode,
        place_mode: item.place_mode,
        pk_odds_key: pkoddskeyarr.join(':'),
        bc_type: item.bc_type,
        league_id: item.league_id,
        home_id: item.home_id,
        away_id: item.away_id,
        nav_data: item.nav_data,
        min_stake: props.orderdata.limit.min_stake,
        max_stake: props.orderdata.limit.max_stake,
        min_odd: Number(parseFloat(item.min_odd).toFixed(2)),
        max_odd: Number(parseFloat(item.max_odd).toFixed(2)),
        odd: Number(parseFloat(item.odd).toFixed(2)),
        reservation_pk_ratio: props.itemdata.data.odds[props.pkindex].pk_ratio,
        reservation_stake: Number(parseFloat(item.reservation_stake).toFixed(2)),
      }

      // if (item.order_mode == 'count_user') {
      //   b.member_count = item.member_count
      // } else {
      //   b.member_count = 1
      // }

      if ((b.order_mode == 'all_user' || b.order_mode == 'count_user') && b.place_mode == 1) {
        b.money_mode = item.money_mode
      } else {
        b.money_mode = 'max'
      }
      body.minfo.bc_type = item.bc_type
      console.log(b);

      a.push(b)
    })
    body.place_data = a
    body.handicapname = dialogState.dialogArr[props.dataindex].handicapname
    dialogState.orderData.data = body
    dialogState.orderData.show = true
  } else {
    ElMessage({
      message: languageJson.value.message.orderWarning,
      type: 'warning',
    })
  }
}

const getvalue = () => {
  const userData = localStorage.getItem('orderData');

  if (userData) {
    const userObj = JSON.parse(userData);
    console.log(userObj);  // 输出 { name: 'Alice', age: 30, email: 'alice@example.com' }
    console.log(userData.runtime);

    if (props.orderdata.place_data[props.orderindex].runtime == undefined || props.orderdata.place_data[props.orderindex].runtime == null) {
      props.orderdata.place_data[props.orderindex].runtime = userObj.runtime
      props.orderdata.place_data[props.orderindex].reservation_stake = userObj.reservation_stake
    }

    // props.orderdata.place_data[props.orderindex].order_mode = userData.order_mode
    // props.orderdata.place_data[props.orderindex].place_mode = userObj.place_mode
    // props.orderdata.place_data[props.orderindex].money_mode = userObj.money_mode

  }
}
</script>

<style lang="scss" scoped>
.create_order {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(55, 17, 216, 0.08);
}

.content {
  display: flex;
  margin-bottom: 8px;

  .item {
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      font-family: AlibabaPuHuiTi_2_65_;
      font-size: 12px;
      color: #999;
      margin-bottom: 4px;
    }

    .pedir_button,
    .pedir_button:hover {
      width: 48px;
      height: 24px;
      background-color: #3711d8;
      border-radius: 0;
      border: none;
      font-family: AlibabaPuHuiTi_2_65_;
      font-size: 12px;
      color: #fff;
    }
  }
}

.content2 {
  display: flex;

  .item {
    display: flex;
    flex-direction: column;

    .name {
      font-family: AlibabaPuHuiTi_2_65_;
      font-size: 12px;
      color: #999;
    }

    .price {
      font-size: 12px;
      font-weight: bold;
      color: #000;
      margin-top: 4px;
    }
  }
}

.range_input {
  width: 90px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  justify-content: space-around;
  background-color: #f3f5fd;
  border-radius: 0;
  cursor: text;
  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: translateZ(0);
  border: solid 1px #f3f5fd;

  input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    display: inline-block;
    height: 24px;
    line-height: 28px;
    margin: 0;
    padding: 0 4px 0 6px;
    width: 39%;
    text-align: left;
    font-size: 12px;
    color: #333;
    background-color: transparent;
  }
}
</style>

<style>
.range_input input::placeholder {
  font-family: PingFangSC;
  font-size: 12px;
  line-height: 1.43;
  color: #b7bdc6;
}

.create_order .el-form-item {
  margin-bottom: 0;
}

.create_order .el-input-number .el-input__wrapper {
  padding: 0 6px;
}
</style>